<template>
  <div class="gu_Container">
    <div class="areaView">
      <input
        type="text"
        placeholder="省/市/区"
        readonly
        @click="showArea"
        v-model="provinceCityCounty"
      >
      <div class="arrow"><van-icon name="arrow" /></div>
    </div>
    <van-popup v-model="show" position="bottom">
      <van-area
        :area-list="areaList"
        @confirm="chooseArea"
        @cancel="cancelChoose"
        :value="address"
        :columns-num="columnsNum"
      />
    </van-popup>
  </div>
</template>
<script>
import area from "../common/area";
export default {
  name: "areaChoose",
  props: {
    //初始化时默认选中的省市区（传区县的编码，没有区县传市的编码）
    address: {
      default: "110101"
    },
    //设置几级联动
    columnsNum: {
      default: 3
    }
  },
  data() {
    return {
      //选中省市区地址显示
      provinceCityCounty: "",
      //选中省份
      privince: "",
       //选中城市
      city: "",
       //选中区县
      county: "",
      //获取选中省份code
      privinceCode: "",
      //获取选中城市code
      cityCode: "",
      //获取选中区县code
      countyCode: "",
      //全国省市区json数据
      areaList: {},
      //显示弹出层
      show: false
    };
  },
  mounted() {
    this.areaList = area;
  },
  methods: {
    //显示地区选择器
    showArea() {
      this.show = true;
    },
    // 确定选择
    chooseArea(arr) {
      this.provinceCityCounty="";
      if (arr[0]) {
        this.privinceCode = arr[0].code;
         this.privince = arr[0].name;
      }
      if (arr[1]) {
        this.cityCode = arr[1].code;
        this.city = arr[1].name;
      }
      if (arr[2]) {
        this.countyCode = arr[2].code;
        this.county = arr[2].name;
      }
      //如果是直辖市
      if (arr.length == 3 && arr[0].name == arr[1].name) {
        this.provinceCityCounty = arr[0].name + arr[2].name;
      } else if (arr.length == 2 && arr[0].name == arr[1].name) {
        this.provinceCityCounty = arr[0].name + arr[1].name;
      } else {
        arr.forEach((item, index) => {
          this.provinceCityCounty += item.name;
        });
      }
      this.show = false;
    },
    //取消选择
    cancelChoose() {
      this.show = false;
    }
  }
};
</script>
<style scoped>
.van-popup {
  width: 100%;
}
.areaView {
  width: 100%;
  position: relative;
}
.areaView input {
  width: 100%;
  height: 0.3rem;
  border: none;
  background: #eeeeee;
  padding:0 0.1rem;
  border-radius: 0.03rem;
}
.arrow{
   position: absolute;
  top:0;
  right:0;
  height:100%;
  display:flex;
  align-items: center;
  justify-content: center;
  width:.1rem;

}
</style>


